<template>
  <!--收款确认完成-->
  <div>
    <div class="msg">
      <div class="weui-media-box weui-media-box_appmsg" v-for="item in orderDetailList">
        <div class="weui-media-box__hd">
          <img :src="item.coverImg | imgPathFilter" alt="" class="weui-media-box__thumb" width="100" height="82">
        </div>
        <div class="weui-media-box__bd">
          <h4 class="weui-media-box__title">{{item.goodsName}}</h4>
          <p class="weui-media-box__desc">{{item.unitPrice}}元</p>
        </div>
        <span class="num">×{{item.buyNum}}</span>
        <img src="../../../assets/confirmsuccess.png" alt="" width="108" class="state">
      </div>
    </div>
    <div class="divider"></div>
    <p class="total">总计 <span>{{order.totalPrice}}元</span></p>
    <div class="divider"></div>
    <wv-group class="mymsg">
      <wv-cell title="登录账号" :value="user.accountName"></wv-cell>
      <wv-cell title="订单编号" :value="order.orderNo"></wv-cell>
      <wv-cell title="订单时间" :value="order.createDate"></wv-cell>
      <wv-cell title="支付时间" :value="order.payDate"></wv-cell>
      <wv-cell title="支付方式" :value="payway.paywayName"></wv-cell>
      <div class="beizhu" v-if="gatheringRecord.remark!=''">
        <p>备注</p>
        <div>{{gatheringRecord.remark}}</div>
      </div>
    </wv-group>
    <p class="title">支付凭证</p>
    <p class="pingzheng" v-for="payVoucherImg in voucherImgList" v-if="voucherImgList.length>0">
      <img :src="payVoucherImg | imgPathFilter" width="100%" height="100%">
    </p>
    <div class="upload" @click="initChooseImageWxapi()">
      <p>
        <img src="../../../assets/upload.png" alt="" width="36">
      </p>
      上传支付凭证
    </div>
    <p class="offer" @click="finish(voucherImgList)">完成</p>
  </div>
</template>
<script type="text/ecmascript-6">
  import {gatheringRecordDetail, gatheringUpdate, uploadImg} from '../../../../test/unit/http'
  import {wxApi} from '../../../../test/unit/flyme_weixin'
  import {Toast} from 'we-vue'
  export default {
    name: '',
    props: {},
    data() {
      return {
        gatheringRecord: {},
        user: {},
        order: {},
        payway: {},
        orderDetailList: [],
        voucherImgList: []
      };
    },
    methods: {
      goUploadImg(params){
        uploadImg(params).then(res => {
          if (res.code == 100) {
            let filePath = res.object.filePath;
            this.voucherImgList.push(filePath)
          } else {
            Toast.fail('上传失败');
          }
        })
      },
      initChooseImageWxapi(){
        let that = this;
        let businessKey = that.$route.query.orderId;
        wxApi.chooseImage({
          count: 1,
          callback: function (res, localIds) {
            let imgId = res.serverId;
            let params = {
              'pojoName': 'gatheringRecord',
              'businessKey': businessKey,
              'imgId': imgId
            };
            that.goUploadImg(params);
          }
        });
      },
      finish(voucherImgList){
        let voucherImg = voucherImgList.join(',');
        let gatheringRecordId = this.$route.query.gatheringRecordId;
        let params = {gatheringRecordId: gatheringRecordId, voucherImg: voucherImg};
        gatheringUpdate(params).then(res => {
          Toast.text("请耐心等待");
          this.$router.push({path: 'index'});
        })
      }
    },
    mounted () {
    },
    created() {
      let gatheringRecordId = this.$route.query.gatheringRecordId;
      gatheringRecordDetail({gatheringRecordId: gatheringRecordId}).then(res => {
        console.log(res);
        if (res.code === 100) {
          this.user = res.object.user;
          this.order = res.object.order;
          this.gatheringRecord = res.object.gatheringrecord;
          this.payway = res.object.payway;
          this.orderDetailList = res.object.orderDetailList;
          let payVoucherImg = this.gatheringRecord.payVoucherImg;
          if (!this.$myUtils.isNull(payVoucherImg)) {
            this.voucherImgList = payVoucherImg.split(',');
          }
        } else {
          Toast.fail(res.info);
        }
      })
    },
    components: {}
  }
</script>

!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f98e3c;
    height: 50px;
    line-height: 50px;
    color: #fff;
  }

  .upload {
    border: 2px dashed #f98e3c;
    text-align: center;
    color: #f98e3c;
    font-size: 13px;
    padding: 30px 10px 70px;
    margin:  15px 10px 70px;
    p {
      margin-bottom: 10px;
    }
  }

  .pingzheng {
    padding: 0 10px;
  }

  .title {
    font-size: 15px;
    color: #999;
    text-align: left;
    padding-left: 15px;
  }

  .beizhu {
    margin: 0 15px;
    padding: 10px 0;
    border-top: 1px solid #e5e5e5;
    color: #999;
    text-align: left;
    p {
      color: #2c3e50;
      margin-bottom: 10px;
    }
  }

  .total {
    font-size: 15px;
    color: #111;
    padding: 10px;
    text-align: left;
    span {
      float: right;
      color: #f98e3c;
    }
  }

  .divider {
    height: 10px;
    background-color: #eee;
  }

  .msg {
    position: relative;
    .num {
      position: absolute;
      right: 10px;
      bottom: 15px;
      font-size: 15px;
      color: #666;
    }
    .state {
      position: absolute;
      top: 10px;
      right: 10px;
    }
  }

  .weui-media-box_appmsg .weui-media-box__hd {
    width: 100px;
    height: auto;
  }

  .weui-media-box_appmsg .weui-media-box__bd {
    text-align: left;
  }

  .weui-media-box__title {
    font-size: 15px;
    color: #666;
    margin-bottom: 25px;
  }

  .weui-media-box__desc {
    font-size: 25px;
    color: #111;
  }
</style>
